Getting Started

Hello and thankyou for purchasing Pivot by Medium Rare. This documentation will give you an understanding of how Pivot is structured and guide you in performing common functions. If you require further assistance not covered in this documentation, please contact us via the button in the top right-hand corner.

Essentials:

This template is based on Bootstrap 3.1 responsive framework
Chrome for Win or Mac (use the inspector, right click -> inspect element to make your life easier)
A decent text editor like Notepad++ for Win or Text Wrangler for Mac
When using Variant - Run in Chrome or Firefox for full features and best performance (Safari is unable to export files and IE is not supported at this time)

1. File Structure

As Pivot is an HTML template, it uses a number of .html pages in conjunction with css stylesheets and a number of javascript plugins. The following is a brief overview of the files and a look at some prominent features.

HTML Files

Each page that comes included with Pivot is housed inside its own HTML file. You will find all these files residing in the root directory of the download package.

Note that index.html will be the file your browser defaults to when you navigate to the Pivot directory in your web browser

CSS Files

Pivot comes with a number of CSS files, many of which you will likely never touch. There are two however, that you will likely edit if you are changing the style of the site in anyway.

theme.css
This is the main stylesheet for the template and includes all styles relating to the appearance of the elements you see inside each page. This stylesheets has been commented for ease of use and all style rules are grouped under particular headings such as /*** SLIDER STYLES ***/

Responsive styles
All CSS media queries are found at the bottom of theme.css, these styles modify how some of the content in Pivot appears on tablet and smartphones, if you need to edit anything specific to these devices, go here.

Javascript Files

As with the CSS files, there are a number of JS files that you'll unlikely need to touch. They are mostly plugins such as isotope and smooth scroll. Unless you know what you're doing, don't touch the JS files as any tinkering could result in undesired behaviour back in the browser.

scripts.js
This is the main scripts file for the template that includes all functions specific to the theme such as control of the navigation and slider declarations among other things. You will see that the file is structured as $(document).ready(function(){}); followed by $(window).load(function(){});

1.1 Grid System

Pivot is based on Bootstrap 3.1 The 12 column grid system is flexible and easy to understand. For a more thorough explanation of the grid go here

3. Using the Icon Pack

Pivot makes use of two awesome icon packs, both provided by Elegant Themes. The Elegant Icon Pack and the Elegant Themes Line Icons. Using these icon packs is a simple matter of knowing the correct class to use.

You can find the appropriate class names for both icon packs here: Line Icons and Elegant Icon Set

Icon Usage:

<i class="icon icon-NAME"></i>

<i class="icon icon-flag"></i> will give you a flag icon, who would have guessed!?

4. Sliders

Pivot uses WOO Themes Flexslider plugin as its primary slider manager. You can view all available options for the plugin at WOO Themes website

Here are the JS declarations for the different slider types used in Pivot: (note that you can add the class 'slider-fullscreen' to any slider to make it fullscreen)

Hero Slider:
```
$('.hero-slider').flexslider({});
				
```

Testimonials Slider:


$('.testimonials-slider').flexslider({ directionNav: false });

Image Gallery:


$('.image-slider').flexslider({ animation: "slide"});

5. Parallax Backgrounds

Many fullscreen background elements in Pivot use a parallax effect when scrolling. This effect is disabled for touch devices to improve performance.

Enabling the parallax effect requires you to add the class '.parallax-background' to the '.background-image-holder' element like so:


<section>
	<div class="background-image-holder parallax-background">
		<img alt="Background Image" class="background-image" src="img/my-image.jpg" />
	</div>
</section>

5a. Layered Parallax

As of Pivot 1.4.0 you have access to multiple layered parallax (controlled by the mouse movement). Getting the most out of this effect requires a couple of steps to be followed. The structure for the layered parallax is found below.

At present, the effect is setup to handle up to 3 layers.

Tips:

The background layer is handled as a normal background-image-holder (as per section 5). Use a jpg with your bottom layer to save file size and loading time.
The second and third layers must both be .png files with transparency enabled
The second and third layer png's should be the same pixel dimensions as the background layer to ensure correct placement (ie. if the background is 1440 x 900, the layers should also be 1440x900)
To compress large png files down to smaller sizes, use tinypng.com


<div class="background-image-holder">
	<img class="background-image" alt="Background Image" src="img/layer1.jpg">
</div>

<div class="foreground-image-holder layer-1">
	<img class="background-image" alt="Background Image" src="img/layer2.png">
</div>

<div class="foreground-image-holder layer-2">
	<img class="background-image" alt="Background Image" src="img/layer3.png">
</div>

NOTE:

If you are using the layered parallax effect in a slider, then the 'li' element must have class 'hover-background'

If you are using the layered parallax effect in a divider section then the 'section' element must have the class 'hover-background'

6. Colour Schemes

Pivot ships with 16 different colour schemes. Using Variant, you can change the colour scheme simply by clicking the 'Colour Scheme' tab in the sidebar and selecting your desired scheme from the swatches.

Outside of Variant you will need to include the appropriate CSS file in the head of your document. For example, if you wanted to use the 'Cobalt' colour scheme you would include the following:


<link href="css/theme-cobalt.css" rel="stylesheet" type="text/css" media="all"/>

Creating your own colour scheme with Less

As Pivot comes with less files, you can easily change the colour scheme in theme.less
The colour variables are as follows:

@color-primary;
@color-secondary;
@color-secondary-2;

Edit these values inside the theme.less file and compile to generate your own colour scheme

7. Lightbox Galleries

Pivot makes use of the lightbox gallery javascript plugin and is simple to setup on any image element by observing the following conventions. The image must be wrapped in an 'a' tag and contain a href that points to the large image (the one you want to show when the user clicks on the thumbnail). Inside the 'a' you need an 'img' element whose 'src' value points to the thumbnail image. As so:


<a href="img/my-image-large.jpg" class="lightbox-link-mrv" data-lightbox="true"  data-title="My Image's Title">
	<img class="lightbox-image" alt="Designer" src="img/my-image-thumb.jpg" />
</a>

8. Embedding an Instagram Feed

The Instagram feed element uses a HTML5 data attribute called 'data-user-name' to determine which feed to display. Changing it is as simple as entering your Instagram username into the attribute like so (leave the containing 'ul' element empty as this is populated by the Spectragram plugin):


<div class="instafeed" data-user-name="YOUR-USERNAME-HERE">
	<ul></ul>
</div>

8. Embedding a Twitter Feed

The Twitter feed element uses a HTML5 data attribute called 'data-widget-id' to determine which feed to display. Changing it requires you to create a widget from your Twitter account.

Do this by going to the 'Settings' page of your Twitter account and clicking 'Widgets'. Click 'Create New' and then 'Create Widget'. One done, go back to the 'Widgets' page and click 'Edit' on your newly created widget. From here you need to copy the widget id out of the url bar. The widget id is the long numerical string after /widgets/ and before /edit and paste it into the 'data-widget-id' attribute on the tweets div.

You can leave the #tweets div empty as it is populated by the Twitter Fetcher plugin


<div id="tweets" data-widget-id="492085717044981760">
					
</div>

9. Countdown timer

The countdown timer is controlled by a javascript plugin called 'Jquery Countdown'. We have set it up so that all you need to do is pass a date into the data attribute 'data-date' in the format YYYY/MM/DD with optional hh:mm

Be sure to leave the countdown div empty as it will be populated by the plugin


<div class="countdown" data-date="2016/10/06"></div>


<div class="countdown" data-date="2016/05/21 09:00"></div>

10. Linking the mail form using an SMTP server

Your mail form will not work unless you have your files running on a hosting server with PHP 5. When you have your files ready on your hosting server, you need to edit the settings to make the email function work.

Please note that you should first get your SMTP mail settings from your hosting provider before proceeding.
It is also a good idea to set up your sending email address in cPanel before proceeding.
Contact your hosting provider for support in this area, as we don't have access to your system to sort out these details.

Open mail/mail.php and make the following changes:

Line 27: Change to your own SMTP mail server and appropriate port number. Usually mail.yourdomain.com if you want to use your cPanel hosting server's email system. Otherwise you can use your ISP mail server but beware you'll need to provide account login details either way.
NOTE FOR GMAIL USERS:
Gmail requires that you use port 587 with TLS security so your line 27 would look like this:
$transport = Swift_SmtpTransport::newInstance('smtp.gmail.com', 587, 'tls').
Line 28: Enter your email account username, usually the entire email address at your domain eg: test@mediumra.re . You might need to create an email account in your cPanel for this if you don't already have one set up. Otherwise you can use the mail info from your ISP.
Line 29: Enter the password for your email account at your domain. You might need to create an email account in your cPanel for this if you don't already have one set up.
Line 45: Edit the subject for the email that will be sent to the recipient of your form.
Line 47: Change the name and email address of the "From" person here. This could be yourself or you could make one up and address could be noreply@yourdomain.com with a name of Website Form

You will receive feedback from the Swift Mailer system on your page. You will be given an error until you get the sending settings just right. When the settings are correct, you'll receive a green box with a success message. Swift Mailer is used because it is reliable in sending, and gives feedback when message has been sent.

You will see some more detailed information about suggested sending settings inside the mail.php file.

For a full range of documentation on configuring and using the Swift Mailer Library see here:http://swiftmailer.org/docs/sending.html

If you encounter a "Connection refused "problem with the contact form you may need to contact your server or email host to determine the correct SMTP settings, or fall back to using the standard mail function (see next section).

Of course we are always here to help too! Please open a support ticket at our forum on Ticksy.

11. Linking the mail forms using native PHP mail()

The Mail Transport sends messages by delegating to PHP's internal mail() function.

In our experience, the mail() function is not particularly reliable. We only recommend using this if you can't get a satisfactory result using the above mentioned SMTP method.

The problem with mail() is that it "tries" to simplify things to the point that it actually makes things more complex due to poor interface design. The developers of Swift Mailer have gone to a lot of effort to make the Mail Transport work with a reasonable degree of consistency.

Serious drawbacks when using this Transport are:

Unpredictable message headers
Lack of feedback regarding delivery failures
Lack of support for several plugins that require real-time delivery feedback

It's a last resort, and we say that with a passion!

Using the Mail Transport